<template>
  <div>
    <search
      position="absolute"
      @on-submit="initData(4)"
      @on-cancel="cancelLoadData(4)"
      ref="search"
      placeholder="咨询内容"
      v-model="CC"
      style="position: fixed; left: 0; right: 0; z-index: 100" :style="{ top: bTop}">
    </search>
    <div class="btn-box" style="margin-top: 50px;">
      <x-button type="primary" link="/consultZYSX1">我要提问</x-button>
    </div>
    <div class="message-content">
      <div v-if="caseObj.length>0" v-for="(caseItem, index) in caseObj">
        <div class="message-box">
          <div class="mb-question" style="padding-left: 65px;">
            <div class="customer" style="left: 0;"></div>
            <div class="question">{{caseItem.content}}</div>
          </div>
          <div class="mb-answer" style="padding-right: 65px;">
            <div class="police" style="right: 0;"></div>
            <div class="answer">{{caseItem.consultContent}}</div>
          </div>
        </div>
      </div>
      <div v-else>无个人咨询数据</div>

      <div class="btn-box" v-show="isShow">
        <!--<p class="loadingMore" @click="loadMore()" v-if="count<totalRow">加载更多</p>-->
        <!--<x-button mini v-else>已加载全部</x-button>-->

        <p class="loadingMore" @click="loadMore()" v-if="count<totalRow">加载更多</p>
        <p class="loadingMore" v-else>已加载全部</p>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import {XButton, Search} from 'vux'

  export default {
    data() {
      return {
        bTop: "0px",
        count: 4,
        accountId: JSON.parse(localStorage.getItem('user')).accountId,
        userGuid: JSON.parse(localStorage.getItem('user')).guid,
        caseObj: [],
        totalRow: '',
        loginmember: {},
        isShow: false,
        CC: '',
      }
    },
//    mounted(){
//      this.initUser();
//      //this.initData(this.count);
//    },
    created() {
      this.initUser();
      //this.isShow = true;
    },
    methods: {
      initUser: function () {
        let _self = this;
        _self.axios({
          method: 'get',
          url: global.memberApiUrl + '/member/' + _self.userGuid
        }).then(function (response) {
          if (response.status == "200" && response.data.succ) {
            _self.loginmember = response.data.data;
            _self.initData(_self.count);
          }
        })
          .catch(function (response) {
            console.log(response);
          });
      },
      initData(val) {
        let _self = this;
        // _self.axios.get('http://172.17.150.72:7000/consults/myconsult/page', {
          _self.axios.get(global.baseApiUrl + 'consults/myconsult/page', {
          params: {
            ps: val,
            pi: '1',
            sb: 'cos_time',
            sd: 'desc',
            q_creator_s_eq: _self.loginmember.guid,
            status: '',
            kw: _self.CC
          }
        })
          .then(function (response) {
            _self.totalRow = response.data.data.totalRow;
            _self.caseObj = [];
            let d = response.data.data.list;
            for (let i = 0; i < d.length; i++) {
              _self.$set(_self.caseObj, i, {
                content: d[i].content,
                consultContent: d[i].consultAnswer == null ? '未回复' : d[i].consultAnswer.conetent
              });
            }
            _self.isShow = true;
          })
          .catch(function (response) {
            console.log(response);
          });
      },
      loadMore() {
        this.count += 4;
        this.initData(this.count);
      },
      cancelLoadData(val) {
        this.CC = "";
        this.initData(val);
      },
    },
    components: {
      XButton, Search
    }
  }
</script>


<style rel="stylesheet/less" lang="less" scoped>
  .message-box {
    padding: 15px;

    .mb-question, .mb-answer {
      position: relative;
      margin-bottom: 15px;

      .police, .customer {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        position: absolute;
        top: 0;
      }

      .police {
        background: url('./images/police.jpg') no-repeat;
        background-size: 50px 50px;
      }

      .customer {
        background: url('./images/customer.jpg') no-repeat;
        background-size: 50px 50px;
      }

      .question {
        background-color: #eee;
        border: 1px #e5e5e5 solid;
        padding: 10px;
        border-radius: 5px;
        position: relative;
      }

      .question::before {
        position: absolute;
        top: 5px;
        left: -10px;
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-right: 10px solid #e5e5e5;
        border-bottom: 5px solid transparent;
      }

      .answer {
        background-color: #b2e1fd;
        border: 1px #96cded solid;
        padding: 10px;
        border-radius: 5px;
        position: relative;
      }

      .answer::before {
        position: absolute;
        top: 5px;
        right: -10px;
        content: '';
        display: inline-block;
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-left: 10px solid #96cded;
        border-bottom: 5px solid transparent;
      }

    }
  }

  .btn-box {
    text-align: center;

    .weui-btn_mini {
      background-color: #eee;
      color: #666;
    }

  }
</style>
